[css] nth-child와 nth-of-type 선택자 비교하기

Last Modified : 2020-05-10 / Created : 2015-12-16

23,604
View Count

주소 복사하기

CSS 선택자 중에서 nth-child와 nth-of-type 속성은 매우 자주 사용되는 속성이다. 이 두 속성은 해당하는 태그에서 원하는 순번에 해당하는 태그만 속성을 지정할 수 있다는 장점을 가지고 있다. 이 두 속성의 차이점은 무엇인지 알아보겠다.

nth-child와 nth-of-type의 가장 큰 차이점은 바로 해당하는 태그의 순서를 말하는지 아니면 부모 속성에서 특정 태그를 가진 자식 속성에서 몇번째 해당하는지의 차이라고 보면된다. 말로하면 쉽게 이해하지 못할 수 있으므로 아래 예제를 살펴보자. 풀어서 얘기하면...

nth-child : 모든 자식의 순서에서 찾음
nth-of-type: 해당하는 자식 태그 요소에서의 순서를 찾음

만약 자식 요소 중에서도 특정한 태그를 선택하고 스타일을 부여할 경우에는 nth-of-type을 사용해야 된다. 그럼 아래 예제를 확인해보자.

# nth-child 그리고 nth-of-type 예제소스 보기

<div>
   <p>test line 1</p>
   <span>test line 2</span>
   <p>test line 3</p>
   <p>test line 4</p>
   <span>test line 5</span>
</div>

위와 같은 웹페이지가 존재할 경우 아래 스타일 속성을 적용하면 결과가 어떻게 나타나게될까?

<style>
   p:nth-of-type(2) { color: red; }
   p:nth-child(2) { color: blue; }
   p:nth-child(4) { color: green; }
   span:nth-child(1) { color: orange; }
   span:nth-of-type(1) { color: yellow; }
</style>

위 CSS 속성을 적용한 결과는 아래와 같다.

test line 1
test line 2
test line 3
test line 4
test line 5

참고로 이 두 속성은 CSS3에 해당하는 속성으로 IE 9 이상부터만 지원하므로 구버전인 8에서는 지원되지 않는다.